{template 'header'}
<style>
    body {
        background-image: url('{MODULE_URL}assets/img/logo_bg.jpg');
    }
    .cent {
        width: 90%;
        height:540px;
        position: absolute;
        top: 5%;
        left: 5%;
        background: white;
        border-radius: 40px;
        box-shadow: 2px 4px 5px #d4d3d2;
    }
    .cent .logo {
        width: 136px;
        height: auto;
        position: absolute;
        top: 8%;
        left: 50%;
        margin-left: -72px;
    }
    .cent .logo img {
        width: 100%;
        height: auto;
        position: absolute;
    }
    .cent .denglu {
        width: 70%;
        margin-top: 200px;
        margin-left: 1.8rem;
    }

    .cent .denglu img {
        width: 50px;
        margin-top: 200px;
    }

    .aui-form-list {
        border: none;
    }

    .aui-list .aui-list-item {
        padding-left: 0.25rem;
    }
    .mui-input-group{
        width: 90%;
        margin: 10px auto;
    }
    .mui-input-group:after{
        background: none;
    }
    .mui-input-group:before{
        background: none;
    }
    .mui-input-row input{
        font-size: 12px;
    }
    .mui-btn-block{
        height: 38px;
        line-height: 38px;
        padding: 0;
        font-size: 16px;
    }
</style>
</head>

<body>
<div class="cent" id="login-1">
    <div class="logo">
        <img src="{MODULE_URL}assets/img/logo.png" alt="">
    </div>

    <div class="denglu">
        <h1 style="color:#24b476;font-weight:800; font-size: 24px">修改密码</h1>
    </div>


    <div class="mui-input-group" id="input_example">
        <div class="mui-input-row">
            <input type="text" placeholder="请输入用户ID">
        </div>
        <div class="mui-input-row">
            <input type="text" placeholder="请输入手机号">
        </div>
        <div class="mui-input-row">
            <input type="password" placeholder="请输入密码" id="password">
        </div>
        <div class="mui-input-row">
            <input type="password" placeholder="请确认密码" id="sure_password">
        </div>
    </div>

    <div class="" style="margin: 0 1.8rem;">
        <button onclick="tijiao()" class="mui-btn mui-btn-block" style="background:#24b476;color:#fff;">修改密码</button>
    </div>
</div>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script type="text/javascript">
    mui.init()


    function tijiao() {
        var check = true;
        mui("#input_example input").each(function () {
            //若当前input为空，则alert提醒
            if (!this.value || this.value.trim() == "") {
                var label = $(this).attr("placeholder");
                ;
                mui.alert(label);
                check = false;
                return false;
            }
        });
        if (check) {
            mui.alert('验证通过!')
        }
    }
</script>
</body>

</html>